/* 

函数组件作用(类组件叫生命周期)：
  1. 实现挂载时功能 - 组件挂载完毕的时候发起请求
    useEffect(() => {  }, []);
  2. 实现更新时功能 - 可以监听某个状态的更新
    useEffect(() => {  }, [状态1, 状态2]);
  3. 实现卸载时功能 - 应用场景：关闭定时器，取消订阅
    useEffect(() => {  
      函数的返回值会在卸载时自动触发
      return ()=>{  }
    }, []);
    
*/


import React, { useState } from 'react';
import { useEffect } from "react";

// 函数式组件
function App() {
  // 初始化状态
  const [show, setShow] = useState(true);
  return <div>
    {/* 条件渲染 Panel 组件 */}
    {show && <Panel></Panel>}
    {/* 点击改变状态卸载组件 */}
    <button onClick={() => setShow(!show)}>显示隐藏组件</button>
  </div>;
}

function Panel() {

  useEffect(() => {
    // 启动一个定时器
    const timeId = setInterval(() => {
      console.log(count);
    }, 1000);

    // !!!! 卸载时触发 useEffect 返回的函数
    return () => {
      console.log('组件卸载了');
      // 卸载组件时清除定时器
      clearInterval(timeId);
    };
  }, []);

  return <div>
    有定时器面板组件
  </div>;
}

export default App;
